<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <title>Title</title>
</head>
<style>
    .box1 {width:100px;height:100px;float:left;background: blue;}
</style>
<body>
<div id="box">
    <div class="box1" v-drag></div>
</div>
</body>
<script>
    Vue.directive('drag',function () {
        var oDiv = this.el;
        oDiv.onmousedown=function (ev) {
           var disX=ev.clientX-oDiv.offsetLeft;
           var disY=ev.clientY-oDiv.offsetTop;

           document.onmousemove=function (ev) {
              var l = ev.clientX-disX;
              var t = ev.clientY-disY;
              oDiv.style.left = l+'px';
              oDiv.style.top = t+'px';
           };
           document.onmouseup=function () {
              document.onmousemove=null;
              document.onmouseup=null;
           }


        }
    });
    var app = new Vue({
        el: '#box',
        data: {
            msg: 'welcome'
        }
    })
</script>
</html>